<template>
  <div class="login-container">
    <div class="login-wrap">
      <el-card>
        <div class="title">风险决策系统</div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" status-icon size="large">
          <el-form-item label="账号" prop="name">
            <el-input v-model="ruleForm.account" />
          </el-form-item>
          <el-form-item label="密码" prop="name">
            <el-input v-model="ruleForm.password" show-password />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)"> 登录 </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </el-form-item>
        </el-form></el-card
      >
    </div>
  </div>
</template>

<script setup>
import { login } from '@/apis/login'
import { setToken } from '@/utils/auth'
const router = useRouter()
const rules = reactive({
  account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})
const ruleFormRef = ref(null)
const ruleForm = reactive({
  account: 'admin',
  password: 'shichuangwuliu123'
})

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      login(ruleForm).then((res) => {
        let data = res.data
        localStorage.setItem('userInfo', JSON.stringify(data))
        setToken(data.token)
        router.push('/')
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped lang="scss">
.login-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('@/assets/login-back.png') no-repeat;
  background-size: 100% 100%;
  .login-wrap {
    width: 500px;
  }
  .title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: bold;
  }
}
</style>
